<template>
  <div class="all">
    <header>
      <div class="div" @click="back">
<!--        <img src="../../assets/返回.png" alt="">-->
        <span style="margin-left: 15px" class="side">上一步</span>
      </div>
      <div class="div">
        <span>选择评定类型</span>
      </div>
      <div class="div">
        <span class="side" @click="next">下一步</span>
      </div>
    </header>
    <div class="menu">
      <el-steps :active="menuIndex" align-center>
        <el-step title="" v-for="(item, index) in  menuList" :key="index"
                 @click.native="changeMenu(index, url)"
                 process-status="success"
                 :description="item.title">
          <template #icon>
            <div v-if="menuIndex >= index" style="width: 15px;height: 15px;">
              <img src="../../assets/步骤选择.png" style="width: 15px;height: 15px;" alt="">
            </div>
            <div v-else style="width: 6px;height: 15px;background: #1DA4F2;display: flex;align-items: center;justify-content: center">
              <a style="width: 6px;height: 6px;border-radius: 50%;background: white;display: flex;position: absolute;"></a>
            </div>
          </template>
        </el-step>
      </el-steps>
    </div>
    <div class="peopletitle" >
      <img :src="peopleList.PHOTO" v-if="peopleList.PHOTO !== null && peopleList.PHOTO !== undefined && peopleList.PHOTO !== ''" alt="">
      <img v-else src="../../assets/photo.png" alt="">
      <span>{{peopleList.name}}</span>
      <span>|</span>
      <span v-show="peopleList.SEX == 1 || peopleList.sex == 1">男</span>
      <span v-show="peopleList.SEX == 2 || peopleList.sex == 2">女</span>
      <span>|</span>
      <span>{{peopleList.age}} 岁</span>
    </div>
    <div class="content">
      <ul v-for="(item, index) in typeList"
          :class="[item.dict_value == typeid ? 'select' : '']"
          @click="clickType(item.dict_value, index, item)"
          :key="index">
        <li>
          <img :src="[item.isImgShow === true || item.dict_value == typeid ? require('../../assets/' + item.dict_name+ '白@2x.png') :require('../../assets/' + item.dict_name+ '蓝@2x.png')]" alt="">
          <span>{{item.dict_name}}</span>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import $ from 'jquery'
import {Toast} from 'vant'
export default {
  name: 'AssessmentType',
  data () {
    return {
      typeList: [],
      type: 0,
      typeid: 0,
      menuIndex: 2,
      menuList: [
        {
          title: '选择人员',
          url: '/selectAssessor'
        },
        {
          title: '信息录入',
          url: '/enterPingGu'
        },
        {
          title: '选择类型',
          url: '/assessmentType'
        },
        {
          title: '选择量表',
          url: '/selectionAssessment'
        },
        {
          title: '量表填写',
          url: '/assessmentScale'
        }
      ],
      peopleList: []
    }
  },
  mounted () {
    this.type = this.$utils.getUrlKey('type')
    // $('.content').css('height', $(window).height() - $('header').height() + 'px')
    // 获取评估类型
    this.getlistByType()
    if (sessionStorage.getItem('assessid') !== undefined) {
      this.typeid = Number(sessionStorage.getItem('assessid'))
    }
    this.ACCEPT_USER_ID = sessionStorage.getItem('ACCEPT_USER_ID')
    this.getPerson()
  },
  methods: {
    // 获取个人基本信息
    getPerson () {
      this.$http.findUserXinXiTuoMin({'data_user_id': this.ACCEPT_USER_ID})
        .then(res => {
          console.log(res)
          if (res.data.status === 'success') {
            this.peopleList = res.data.data
            console.log(this.peopleList)
          }
        })
        .catch(err => {
          console.log(err)
        })
    },
    // 点击返回
    back () {
      // 返回上一页
      this.$router.go(-1)
    },
    // 根据字典查询 自我评估类型
    getlistByType () {
      this.$http.listByType({dict_type: 'assess_self_type'})
        .then(res => {
          console.log(res)
          if (res.data.status === 'success') {
            this.typeList = res.data.data
          }
        })
        .catch(err => {
          console.log(err)
        })
    },
    //  点击选择或取消
    clickType (id, index, item) {
      var _this = this
      if ($('.content ul').eq(index).hasClass('select')) {
        this.$set(item, 'isImgShow', false)
        $('.content ul').eq(index).removeClass('select')
        this.typeid = 0
      } else {
        // 循环选中当前，其他清除
        this.typeList.forEach(function (curr, index, arr) {
          if (item.dict_name === curr.dict_name) {
            _this.$set(item, 'isImgShow', true)
          } else {
            _this.$set(curr, 'isImgShow', false)
          }
        })
        this.typeid = id
        $('.content ul').eq(index).addClass('select').siblings().removeClass('select')
      }
    },
    next () {
      // 如果有选中类型才能进行跳转
      if ($('.select').length > 0) {
        window.sessionStorage.removeItem('selData')
        this.$router.push({path: '/selectionAssessment', query: {'assessid': this.typeid, 'type': this.type}})
      } else {
        Toast('请选择评定类型')
      }
    }
  },
  destroyed () {
    sessionStorage.setItem('assessid', this.typeid)
  }
}
</script>

<style scoped>
  .all{
    width: 100%;
    height: 100%;
    background: #FAF9FE;
  }
  header{
    width: 100%;
    height: 12vw;
    display: flex;
    align-items: center;
    background: #FFFFFF;
  }
  .div{
    width: 33%;
    height: 100%;
    display: flex;
    align-items: center;
    font-size: 15px;
    font-weight: bold;
    font-family: "PingFang SC";
  }
  .div:nth-child(1) img{
    width: 7px;
    height: 13px;
    margin: 0 5px 0 15px;
  }
  .div:nth-child(2) {
    justify-content: center;
  }
  .div:nth-child(3) {
    justify-content: flex-end;
  }
  .div:nth-child(3) span{
    margin-right: 15px;
  }
  .side{
    color: #1da4f2;
  }
  .content{
    width: 100%;
    overflow: auto;
  }
  .content ul{
    width: 92%;
    height: 60px;
    margin: 5px auto auto auto;
    border-radius: 5px;
    display: flex;
    align-items: center;
    font-size: 16.5px;
    background: #FFFFFF;
    font-family: PingFang SC;
    font-weight: 500;
  }
  .select{
    color: #FFFFFF !important;
    background: linear-gradient(90deg, #1DA3F2, #1DC7F2) !important;
  }
  .content ul li {
    width: 100%;
    display: flex;
    align-items: center;
    padding: 0 10px;
    box-sizing: border-box;
  }
  .content ul li img{
    width: 18px;
    height: 18px;
    margin-right: 5px;
  }
  .menu{
    width: 100%;
    height: 60px;
    background: #1DA4F2;
    box-shadow: 0px 1px 0px 0px #E5E5E5;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow:hidden;
  }
  /*/ 选择框 开始样式/*/
  /deep/ .el-steps--horizontal{
    width: 105%;
  }
  /deep/ .el-step.is-center .el-step__description{
    padding: 0;
  }
  /deep/ .el-step__description{
    margin: 0;
    font-size: 13px;
  }
  /deep/ .el-step__icon{
    width: auto;
    height: auto;
  }
  /deep/ .el-step__icon.is-text{
    border: none;
  }
  /deep/ .is-finish,
  /deep/ .el-step__description.is-process{
    color: #fff;
  }
  /deep/ .el-step__description.is-finish{
    color: white !important;
  }
  /deep/ .el-step__description.is-wait{
    color: rgba(255, 255, 255, 0.7);
  }
  /deep/ .el-step__head.is-finish{
    border-color: #fff;
  }
  /deep/ .el-step__head.is-wait{
    border-color: transparent !important;
  }
  /deep/ .el-step__line{
    border-color: transparent !important;
  }
  /deep/ .el-step.is-horizontal .el-step__line{
    height: 1px;
    /*top:7px;*/
    top: 35%;
  }
  /deep/ .el-step__line{
    background: white;
  }
  /*/ 选择框 结束样式/*/

  .peopletitle{
    width: 92%;
    height: 50px;
    background: linear-gradient(90deg, #1DA3F2, #1DC7F2);
    color: white;
    margin: 10px auto 5px auto;
    border-radius: 10px;
    padding: 0 10px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    font-size: 15px;
    font-family: PingFang SC;
    font-weight: bold;
  }
  .peopletitle span{
    margin-left: 5px;
  }
  .peopletitle img{
    width: 30px;
    height: 30px;
    border-radius: 50%;
    object-fit: cover;
  }
</style>
